<template>
  <div>
    <!-- 滑块 -->
   <div class="expectedContainer">
     <p class="expected">近期最受期待</p>
      <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in expectedList">
          <img :src="item.img | imgFilter" alt="" />
          <p class="name line-ellipsis">{{ item.nm }}</p>
          <p class="data line-ellipsis">{{ item.wish }}人想看</p>
          <p class="data">{{ item.comingTitle }}</p>
        </div>
      </div>
    </div>
   </div>
   <div class="comingMovie">
     <MovieItem v-for="movie in comingMovieList" :movie="movie" :key="movie.movieId" />
   </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import {mapState} from 'vuex';
import MovieItem from "../MovieItem"
export default {
  name: "Coming",
  components:{MovieItem},
  data() {
    return {
      expectedList: [],
      // comingList: [],
    };
  },
  watch: {
    expectedList() {
      this.$nextTick(() => {
        new Swiper(".swiper-container ", {
          directions: "horizontal",
          slidesPerView: 3,
          spaceBetween: -60,
          freeMode: true,
        });
      });
    },
  },
  async mounted() {
    this.$store.dispatch('movie/getComingMovieList')
    const result = await this.$API.reqExpectedList();
    this.expectedList = result.coming;
  },
  methods: {},
  computed:{
      ...mapState('movie',['comingMovieList'])
    }
};
</script>

<style lang="less" scoped>
.expected{
  margin-left: 20px;
}
.swiper-container {
  width: 100%;
  height: 200px;
  margin: 0 20px;
   p {
      width: 85px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      color: #999;
      margin: 3px 0 0 0;
      &.name{
        font-size: 13px;
        font-weight: 700;
        color: #222;
      }
    }
  
}
</style>